<template>
  <view class="workbenches-wrapper">
    <view class="workbenches-header">
      <view class="workbenches-header-left">
        <text class="header-title">工作台</text>
      </view>
    </view>

    <view class="card-container">
      <view class="card-item" @click="goToNews">
        <image class="card-icon" src="/static/icon/newspaper.png" mode="aspectFit"></image>
        <text class="card-title">新闻</text>
      </view>

      <view class="card-item" @click="goToMajorEvents">
        <image class="card-icon" src="/static/icon/majorEvents.png" mode="aspectFit"></image>
        <text class="card-title">大事件</text>
      </view>

      <view class="card-item" @click="goToResources">
        <image class="card-icon" src="/static/icon/resources.png" mode="aspectFit"></image>
        <text class="card-title">现场资源</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const goToNews = () => {
  uni.navigateTo({
    url: '/pages/workbenches/news/index'
  })
}

const goToMajorEvents = () => {
  uni.navigateTo({
    url: '/pages/workbenches/majorEvents/index'
  })
}

const goToResources = () => {
  uni.navigateTo({
    url: '/pages/workbenches/resources/index'
  })
}
</script>

<style scoped>
.workbenches-wrapper {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.workbenches-header {
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
  padding: 20rpx 0;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rpx;
  padding: 0 10rpx;
}

.card-item {
  height: 220rpx;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.card-item:active {
  transform: scale(0.96);
  box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.12);
}

.card-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}
</style>
